<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>询价管理管理</title>
	<meta name="decorator" content="default"/>
	 <script type="text/javascript" src="${ctxStatic}/yz/kyiFormChecker.js"></script>	
	<script type="text/javascript">
		$(document).ready(function() {
		 	var formCheck={
					cnName:[0,'请填写商品'], 
					partsCode:[0,'请填配件编号'],
					venderName:[0,'请填写收制造商品牌'],
					money:['number','请填写代收金额'],
					receiveDate:[0,'请填写预计到货日期']
			    }
	       kyiFormChecker(formCheck,'#inputForm','#btnSubmit',function(msg){//调用layer来提示
	    	   
				showTip(msg, "", 3000,0);
	      }) 
	        
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			}); 
		});
		
		function pipei(a,b,element){
			$.ajax({
				type:"get",
				url :"${ctx}/sys/enquiryGoods/useData?code="+a+";"+b,
				success:function(e){
					console.log(e);
					var ids=e.ids;
					/* if(typeof(e.photos) !='undefined'){	
					var photos=e.photos.split(';');
					} */
					var e=e.part;
					var tableHtml="<table border='1' cellpadding='0' cellspacing='0'><thead><tr><th>商品名称</th><th>配件编号</th><th>制造商</th><th>单价</th><th>预计交货日期</th><th>图片</th><th>说明</th><th>操作</th></tr></thead></table>"
					var table=$(tableHtml)
					
					if(e.length == 0){
						var imgHtml='';
						imgHtml+='<img src="${ctxStatic}/images/add_pic_icon.png" height="25px" width="25px" style="float:left;margin:6px;cursor:pointer" onclick="upfile(this)"/>'
						
						
							var cnName=''
							var partsCode=''
							var venderName=''
							var goodsPrice=''
						    var images=0;
						var trHtml='<tr></tr>';
						var tr=$(trHtml);
						var stgg="<input name='receiveDate' type='text' onclick=\"WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false})\"/>";
						tr.append('<td><input type="text" value="'+cnName+'" name="cnName" maxlength="50"></td>');//商品名称
						tr.append('<td><input type="text" value="'+partsCode+'" name="partsCode" maxlength="50"></td>');//配件编号
						tr.append('<td><input type="text" value="'+venderName+'" name="venderName" maxlength="50"></td>');//制造商
						
						tr.append('<td><input type="text" value="'+goodsPrice+'" name="money" maxlength="9"></td>');//单价
						tr.append('<td>'+stgg+'</td>');//预计交货日期
						
						tr.append('<td>'+imgHtml	+'<input type="file" accept="image/*"  style="display:none" onchange="upImg(this)" name="photos"></td>');//图片
						
						
						tr.append('<td><input type="text"  name="rearks" maxlength="100"><input type="hidden"  name="ids" value="'+ids+'"><input type="hidden" name="images" value="'+images+'"></td>');//说明
						
						tr.append('<td><a href="javascript:void(0)" onclick="deleteTr(this)">删除</a></td>');//删除
						
						tr.find('td').css('padding','0');
						tr.find('input').css('padding','0');
						tr.find('input').css('padding-left','5%');
						tr.find('input').css('width','94%');
						tr.find('input').css('height','100%');
						tr.find('input').css('margin','0px');
						tr.find('input').css('border-radius','0px');
						tr.find('input').css('font-size','12px');
						table.append(tr);
					}
					
					
					$.each(e,function(k,v){
						var imgHtml='';
						imgHtml+='<img src="${ctxStatic}/images/add_pic_icon.png" height="25px" width="25px" style="float:left;margin:6px;cursor:pointer" onclick="upfile(this)"/>'
						
						
							var cnName=v.cnName
							var partsCode=v.partsCode
							var venderName=v.venderName
							var goodsPrice=v.goodsPrice
							var images=v.image
							if(v.image){
								var photos=v.image.split(';')
							
							
							$.each(photos,function(ck,cv){
								
								if(cv){
									imgHtml+='<a href="'+cv+'" target="_blank"><img src="'+cv+'" height="40px" width="50px" style="float:left;margin:4px;" ></a>';
								}
									
							})
							}
						
						var trHtml='<tr></tr>';
						var tr=$(trHtml);
						var stgg="<input name='receiveDate' type='text' onclick=\"WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false})\"/>";
						tr.append('<td><input type="text" value="'+cnName+'" name="cnName" maxlength="50"></td>');//商品名称
						tr.append('<td><input type="text" value="'+partsCode+'" name="partsCode" maxlength="50"></td>');//配件编号
						tr.append('<td><input type="text" value="'+venderName+'" name="venderName" maxlength="50"></td>');//制造商
						
						tr.append('<td><input type="text" value="'+goodsPrice+'" name="money" maxlength="9"></td>');//单价
						tr.append('<td>'+stgg+'</td>');//预计交货日期
						
						tr.append('<td>'+imgHtml	+'<input type="file" accept="image/*"  style="display:none" onchange="upImg(this)" name="photos"></td>');//图片
						
						
						tr.append('<td><input type="text"  name="rearks" maxlength="100"><input type="hidden"  name="ids" value="'+ids+'"><input type="hidden" name="images" value="'+images+'"> </td>');//说明
						
						tr.append('<td><a href="javascript:void(0)" onclick="deleteTr(this)">删除</a></td>');//删除
						
						tr.find('td').css('padding','0');
						tr.find('input').css('padding','0');
						tr.find('input').css('padding-left','5%');
						tr.find('input').css('width','94%');
						tr.find('input').css('height','100%');
						tr.find('input').css('margin','0px');
						tr.find('input').css('border-radius','0px');
						tr.find('input').css('font-size','12px');
						table.append(tr);
					})
					
					var trEnd="<tr><td colspan='8' style='text-align:center'><a href='javascript:void(0)' onclick='addTr(this)'>+新增一条</a></td></tr>";
					table.append(trEnd);
					$(element).next('.app').empty();
					$(element).next('.app').append(table);
				
				}
			})
		}
		function deleteTr(e){
			var trIndex=$(e).parent().parent().parent().find('tr').length
			
			$(e).parent().parent().remove();
			if(trIndex == 2){
				$('.app').find('table').remove();
				$("#btnSubmit").prop('disabled',true);
			}
		}
		function addTr(e){
			var cloneTr=$(e).parent().parent().prev('tr').clone(true);
			var ids=cloneTr.find('input[name="ids"]').val();
			cloneTr.find('input').val('');
			cloneTr.find('input[name="ids"]').val(ids);
			cloneTr.find('input[name="images"]').val(0);
			cloneTr.find('td').eq(5).find('a').remove();
			$(e).parent().parent().prev('tr').after(cloneTr);
		}
		function upfile(el){
			$(el).parents('td').find('input[name="photos"]').last().click();
		}
		
		function upImg(t){
			var input='<input type="file"  accept="image/*" style="display:none" onchange="upImg(this)" name="photos">';
			$(t).after(input);
			var _this = $(t);
			var file = $(t)[0].files[0];  
			var reader = new FileReader();
			reader.onload=function(e) {  
		        imgFile = e.target.result; 
		        var result = $('<a href="javascript:;"><img src="'+imgFile+'" height="40px" width="50px" style="float:left;margin:4px;"  data-action="zoom" ></a>');
		        $(t).parents('td').append(result);
		     
		    };  
		   	reader.readAsDataURL(file);
		}
	 
		$(function(){
			$(".pepeis").click(function(){
				$("#btnSubmit").removeAttr("disabled");
			})
			
			
		})
		 function subEnquiry(){
			 
			 //$("#inputForm").submit();
		 }
		/* <input type="file" name="file" accept="image/*" class="uploadImgs">
		/* 添加图片 */
	/* 	$(function(){
		$(".uploadImgs").on("change",function(){
		//$(this).next().find('img').attr('src',$(this)[0].files[0])
			var _this = $(this);
			var file = $(this)[0].files[0];  
			var reader = new FileReader();
			reader.onload=function(e) {  
		        imgFile = e.target.result; 
		        var result = $('<li class="item-pic"><img src="'+imgFile+'" alt=""></li>')
		      	_this.parent().before(result);
		        _this.after('<input type="file" name="file" accept="image/*" class="uploadImgs" onchange="changeFile(this)">');
		        _this.hide();
		    };  
		   	reader.readAsDataURL(file);
		})
		}) */
	
/* 	function changeFile(t){
		var _this = $(t);
		var file = $(t)[0].files[0];  
		var reader = new FileReader();
		reader.onload=function(e) {  
	        imgFile = e.target.result; 
	        var result = $('<li class="item-pic"><img src="'+imgFile+'" alt=""></li>')
	      	_this.parent().before(result);
	        _this.after('<input type="file" name="file" accept="image/*" class="uploadImgs" onchange="changeFile(this)">');
	        _this.hide();
	    };  
	   	reader.readAsDataURL(file);
	
	}  */
	</script>
	
	<style>
		.app table{
			border:1px solid #CCC;
			#width:980px;
		}
	</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="javascript:void(0)">询价回复</a></li>
	</ul><br/>		
		<div class="control-group">
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;是否需要发票：${fns:getDictLabel(enquiryGoods.whetherTicket, 'whether_ticket', '')}</label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;品质要求：<c:forEach var="quit" items="${lis}">${fns:getDictLabel(quit, 'quality_type', '')},</c:forEach></label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;联系人：${enquiryGoods.contacts }</label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;联系电话：${enquiryGoods.phone }</label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;QQ：${enquiryGoods.oicq }</label>
		</div>
		<form id="inputForm" action="${ctx }/sys/enquiryGoods/saveEnquiry?code=${code}" method="post" enctype="multipart/form-data">
		<c:forEach var="list" items="${list }">
		<div class="control-group">
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;配件信息：${list.partsInfo}</label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;数量：${list.num }</label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;预计到货日期：<fmt:formatDate value="${list.receiveTime}" pattern="yyyy-MM-dd"/></label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;备注：${list.remarks }</label>
			<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;买卖实物图：<c:forEach var="image" items="${list.images }"><img src="${image}" height="80px" width="100px"  data-action="zoom" ></c:forEach></label><br>
		    &nbsp;&nbsp;&nbsp;&nbsp;<input  class="btn btn-primary pepeis" type="button" value="匹配" onclick="pipei('${list.partsInfo}','${list.id }',this)"/>
		    <div class='app'>
		    
		    </div>
		</div>
		</c:forEach>
		
		<div class="form-actions">
		    <shiro:hasPermission name="sys:store:edit"><input id="btnSubmit" class="btn btn-primary" type="submit"  value="回复" disabled="disabled"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
			
		</div>
      </form>
</body>
</html>